<template>
	<view class="myAuth">
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="form1">
			<view class="title">
				<u-form-item label="我的报价" borderBottom ref="item1" labelWidth="120">
				</u-form-item>
			</view>

			<view class="upImg">
				<view class="">
					上传图片
				</view>
				<imgUpload code="zsbm" placeholder="请上传图片" :limit="6" @upImgs="upImgs" ref="imgUpload"></imgUpload>
			</view>
			<u-form-item label="单价" prop="price" borderBottom ref="item1" labelWidth="100">
				<u--input v-model="formData.price" border="none" placeholder="请输入单价"></u--input>
			</u-form-item>
			<u-form-item label="手机号码" prop="phone" borderBottom ref="item1" labelWidth="100">
				<u--input v-model="formData.phone" border="none" placeholder="请输入内容"></u--input>
			</u-form-item>
			<u-form-item label="公司名称" prop="company_name" borderBottom ref="item1" labelWidth="100">
				<u--input v-model="formData.company_name" border="none" placeholder="请输入内容"></u--input>
			</u-form-item>
			<u-form-item label="数量" prop="num" borderBottom ref="item1" labelWidth="100">
				<u--input v-model="formData.num" border="none" placeholder="请输入内容" type="number"></u--input>
			</u-form-item>
			<u-form-item label="地址" prop="address" borderBottom ref="item1" labelWidth="100">
				<view class="myAddress">
					<view class="cityAddres">
						<!-- <vvSelectArea :list="areas" v-model="companyArea" placeholder="请选择所在区域" class="top"
							@change="changecity" ref="csSel"></vvSelectArea> -->
						<view class="top">
							{{formData.address}}
						</view>
						<view class="city" @click="goMap">
							<u-icon name="map" color="#00C777" size="18" class="top"></u-icon>
							<view>坐标</view>
						</view>
					</view>
					<!-- <view class="address">
						{{formData.address}}
					</view> -->
				</view>
			</u-form-item>
			<u-form-item label="简介" prop="introduction" borderBottom ref="item1" labelWidth="100">
				<u-input v-model="formData.introduction" border="none" placeholder="请输入内容" />
			</u-form-item>
		</u--form>
		<u-button class="custom-style" shape="circle" text="提交"
			customStyle="background-color: #00C777;color:#fff;margin-top:70px" @click="goAuth"></u-button>
	</view>
</template>

<script>
	import imgUpload from '@/components/common/imgUpload.vue'
	import vvSelectArea from '@/components/vv-select-area/vv-select-area'
	import {
		cityList,
		myQuote
	} from '@/request/api.js'
	export default {
		components: {
			imgUpload,
			vvSelectArea
		},
		data() {
			return {
				areas: [],
				id: '',
				model1: {

				},
				label: '',
				formData: {
					price: '',
					wantbuy_id: '',
					company_name: '', //公司名称
					phone: '',
					address: '',
					num: '',
					introduction: '',
					imgs: ''

				},
				rules: {
					'price': {
						type: 'string',
						required: true,
						message: '价格只能输入数字和小数点后两位',
						trigger: ['blur', 'change'],
						pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
					},
					'phone': {
						required: true,
						message: '请输入正确的手机号码',
						trigger: ['change', 'blur'],
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
					},

					'address': {
						type: 'string',
						required: false,
						message: '请填写地址',
						trigger: ['blur', 'change']
					},
					'num': {
						type: 'string',
						required: true,
						message: '请填写数量',
						trigger: ['blur', 'change']
					},
					'imgs': {
						type: 'string',
						required: true,
						message: '请上传图片',
						trigger: ['blur', 'change']
					},
					'introduction': {
						type: 'string',
						required: true,
						message: '请填写简介',
						trigger: ['blur', 'change']
					},
					'company_name': {
						type: 'string',
						required: true,
						message: '请填写公司名称',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		methods: {
			changecity(val, label) {
				// console.log(val)
				// console.log(val)
				this.formData.province_id = val[0]
				this.formData.city_id = val[0]
				this.formData.county_id = val[1]
				this.label = label
			},
			getCity() {
				cityList().then(res => {
					// console.log(res)
					this.areas = res.data
				})
			},
			emptForm() {
				for (let k in this.formData) {
					this.formData[k] = ''
				}
				this.$refs.csSel.emptCheckLabels()
			},
			goAuth() {
				this.formData.wantbuy_id = this.id
				if (this.formData.address == '') {
					uni.$u.toast('请定位您的地址')
					return false;
				}
				this.$refs.form1.validate().then(res => {
					myQuote(this.formData).then((res) => {
						if (res.msg == "提交成功") {
							uni.navigateTo({
								url: '/my_pages/components/success?title=资料已提交'
							})
							this.$refs.imgUpload.empt()
							this.emptForm()
						}
					})
				}).catch(errors => {
					uni.$u.toast('请合理输入对应信息')
				})
			},
			goMap() {
				uni.navigateTo({
					url: "/components/common/mapInfo"
				})
			},
			upImgs(e) {
				let arr = e.images
				this.formData.imgs = arr.join(',')
				console.log(this.formData.imgs)
				// console.log(arr, this.formData);
			},
		},
		onLoad(e) {
			// console.log(e)
			this.formData.wantbuy_id = e.data
			this.id = e.data
			console.log(this.id)
			this.getCity()
			uni.$on('map', e => { //
				this.formData.lng = e.longitude
				this.formData.lat = e.latitude
				this.formData.address = e.local
			})
		},
		onReady(e) {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	.myAuth {
		padding: 20rpx 15rpx;
		display: flex;
		flex-direction: column;

	}

	.myAddress {
		display: flex;
		flex-direction: column;
		width: 100%;

		.cityAddres {
			display: flex;
			justify-content: center;
			align-items: center;
			.top {
				flex: 1;
			}

			.city {
				color: #00C777;
				width: 48px;
				display: flex;
			}
		}

		.address {}
	}

	::v-deep .title .u-form-item__body__left__content__label {
		color: #00C777 !important;
	}
</style>
